<template>
    <div class="detail_module_panel other_info">
        <h3 id="work_student" class="detail_panel_title detail_panel_title_icon other_info_icon">
            {{ $t('tel.historyTelRecord') }}
        </h3>
        <div class="panel_info_content">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column align="left" :label="$t('tel.recordTime')" prop="createTime" min-width="140"><!--记录时间-->
                    <template slot-scope="scope">{{ scope.row.createTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                </el-table-column>
                <el-table-column align="left" :label="$t('common.innerOrderId')" prop="orderNid" min-width="140"></el-table-column><!--内部订单号-->
                <el-table-column align="left" :label="$t('common.result')" prop="verifyResult" min-width="80"><!--结果-->
                    <template slot-scope="scope">{{ scope.row.verifyResult | switchResult }}</template>
                </el-table-column>
                <el-table-column align="left" :show-overflow-tooltip="true" :label="$t('common.reason')" min-width="200"><!--原因-->
                    <template slot-scope="scope">
                        <span v-for="(item,index) in scope.row.rciList" :key="index">{{ item.reasonCode + '-' + item.resonCodeReturn + ';' + ' ' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" :show-overflow-tooltip="true" :label="$t('common.remark')" min-width="120" prop="remark"><!--备注-->
                    <template slot-scope="scope">
                        <span>{{ scope.row.remark }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="telPagination">
            <el-pagination @current-change="paginationChange" :current-page.sync="pagination.currentPage"
                           :page-size="pagination.pageSize" layout="total, prev, pager, next, jumper"
                           :total="pagination.recordsTotal"></el-pagination>
        </div>
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import EventBus from '@/libs/event-bus';
    import {eventConf} from '@/config/';

    let that = null;
    export default {
        name: 'hisTelRecord',
        components: {
            Pagination
        },
        mixins: [mixin],
        props: {
            updateType: {
                type: String
            }
        },
        data() {
            return {
                userId: '',
                tableData: [],
                currentPage: 1,
                pagination: {
                    recordsTotal: 0,
                    currentPage: 1,
                    pageSize: 10,
                },
            };
        },
        watch: {
            updateType(val) {
                if (val === 'hisTelRecord') {
                    this.page.currentPage = 1;
                    this.getTableData();
                }
            }
        },
        methods: {
            getTableData() {
                const params = {
                    userId: this.userId,
                    page: {
                        pageNo: this.pagination.currentPage,
                        pageSize: this.pagination.pageSize
                    },
                };
                this.$api.tel.queryVerifyRecords(params).then((res) => {
                    const {status, data, error} = res;
                    if (status === '1' && error === '00000000') {
                        this.tableData = data.data || [];
                        this.pagination.recordsTotal = data.pageCount;
                        this.tableMaxHeight = window.document.body.clientHeight - 300;
                    }
                });
            },
            paginationChange() {
                this.getTableData();
            },
            listenEvent() {
                EventBus.$on(eventConf.UPDATATELRECORD, () => {
                    this.getTableData({currentPage: 1});
                });
            }
        },
        filters: {
            // 用户类型
            switchResult(type) {
                switch (+type) {
                    case 0:
                        return that.$t('common.waitMakeLoan');// 待跟进
                    case 1:
                        return that.$t('common.pass');// 通过
                    case 2:
                        return that.$t('common.refuse');// 拒绝
                    default:
                        return '';
                }
            },
        },
        created() {
            that = this;
            const params = this.$route.params;
            this.userId = params.userId;
            if (this.userId) {
                this.getTableData();
            }
            this.listenEvent();
        }
    };
</script>

<style lang="scss" scoped>
    .popOver {
        word-break: break-all;
    }

    .video {
        background-color: rgba(0, 0, 0, 0.4) !important;
    }

    .video_icon {
        display: block;
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 32px 32px;
        background-image: url("~@/assets/img/icon_video.png");
    }

    .check_loan_history {
        margin-left: 15px;
    }
</style>
